﻿@model KopeykaStore.ViewModels.ShoppingCartViewModel
@{
    ViewBag.Title = "Shopping Cart";
}
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteId).text(data.ItemCount);
                            $('#item-cost-' + data.DeleteId).text(data.ItemCostTotal + ',00 UAH');
                        }

                        $('#cart-total').text(data.CartTotal);
                        $('#cost-total').text(data.CostTotal + ',00 UAH');
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartTotal + ')');
                    });
            }
        });

    });


    function handleUpdate() {
        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

        // Update the page elements
        if (data.ItemCount == 0) {
            $('#row-' + data.DeleteId).fadeOut('slow');
        } else {
            $('#item-count-' + data.DeleteId).text(data.ItemCount);
            $('#item-cost-' + data.DeleteId).text(data.ItemCostTotal + ',00 UAH');
        }

        $('#cart-total').text(data.CartTotal);
        $('#cost-total').text(data.CostTotal + ',00 UAH');
        $('#update-message').text(data.Message);
        $('#cart-status').text('Cart (' + data.CartTotal + ')');
    }
</script>
<h3>
    <em>Review</em> your cart:
</h3>
<img class="order-status" src="/Content/Images/checkout3_1.png" />
<div id="update-message">
</div>
<table>
    <col class="brand-image-column" />
    <col class="product-name-column" />
    <col class="product-price-column" />
    <col class="product-quantity-column" />
    <col class="product-delete-column" />
    <col class="product-cost-column" />
    <tr>
        <th class="align-center">Brand</th>
        <th>Product</th>
        <th class="align-center">Price</th>
        <th class="align-center">Quantity</th>
        <th class="align-center">Delete</th>
        <th class="align-center">Cost</th>
    </tr>
    @foreach (var item in Model.CartItems)
    {
        <tr id="row-@item.RecordId" class="cart-item-row">
            <td class="align-center">
                <a class="pic" href="@Url.Action("Brand", "Store", new { id = item.Product.BrandId })">
                    <img alt="@item.Product.Brand.Name" src="@item.Product.Brand.ThumbnailUrl" />
                </a>
            </td>
            <td>
                @Html.ActionLink(item.Product.Title, "Details", "Store", new { id = item.ProductId }, null)
            </td>
            <td class="align-right">@item.Product.Price UAH</td>
            <td class="align-center" id="item-count-@item.RecordId">@item.Count</td>
            <td class="align-center">
                <a title="Remove from cart" href="#" class="RemoveLink" data-id="@item.RecordId">
                    <img alt="Remove from cart" src="/Content/Images/remove_from_cart.png" />
                </a>
            </td>
            <td class="align-right" id="item-cost-@item.RecordId">@{@((decimal)item.Count * (decimal)item.Product.Price);} UAH</td>
        </tr>
    }
    <tfoot>
    <tr>
        <td class="align-center">&nbsp</td>
        <td>Total</td>
        <td class="align-right">&nbsp</td>
        <td class="align-center" id="cart-total">@Model.CartTotal</td>
        <td colspan="2" class="align-right" id="cost-total">@Model.CostTotal UAH</td>
    </tr>
    </tfoot>
</table>
@Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout", null, new { name = "button" })